<style lang="less" scoped>
    @import './funnel_step.less';
</style>
<template>
    <div>
        <span class="stepIndex">{{subIndex+1}}</span>
        <Select v-model="step.filterMethod" style="width:200px" :transfer="true" placeholder="请选择条件">
            <Option v-for="item in ClickList" :value="item.value" :key="item.value">{{ item.label }}</Option> 
        </Select>
        <span>为</span> 
        <Input v-model="step.YIDname" placeholder="请输入自定义名称" style="width: 200px" />
        <Button icon="ios-remove" @click="delstepchild(subIndex)"></Button>
        <Button icon="ios-funnel-outline" @click="addFunnel(subIndex)">添加筛选</Button>
        <div class="boxChild">
            <div v-for="(item,index) in childConfig" class="mg">
                <div class="condition">
                    <Button class="condition-button" v-on:click="switchConditon()">{{AndOr === 'and' ? '且' : '或'}}</Button>
                </div>
                <div class="step_child">
                    <STEPCHILD :childSubindex="{subIndex:subIndex,index:index}" :ClickList="ClickList"></STEPCHILD>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import STEPCHILD from './funnel_step_child/funnel_step_child'
export default {
    data(){
        return {
            AndOr:'and',
            ClickList: [
                {
                    value: 'pv',
                    label: '浏览页面'
                },
                {
                    value: 'Apponload',
                    label: 'App激活'
                },
                {
                    value: 'AppstartUp',
                    label: 'App启动'
                },
                {
                    value: 'AppSingOut',
                    label: 'App退出'
                },
                {
                    value: 'WebElClick',
                    label: 'Web元素点击'
                },
                {
                    value: 'webPv',
                    label: 'Web页面浏览'
                }
            ],
            model1: '',
            step:{
                filterMethod:'pv',
                YIDname:'名称'
            },
            childConfig:[]
        }
    },
    props:['subIndex','config'],
    mounted(){
        this.childConfig = this.config.steps[this.subIndex].filter.rules;
    },
    methods:{
        delstepchild:function(stepindex){
            this.$parent.$parent.delstep(stepindex);
        },
        switchConditon(){
            this.AndOr === 'and' ? this.AndOr = 'or' : this.AndOr = 'and';
        },
        /**
         *  methods 漏斗添加筛选第一层
         * */
        addFunnel(subIndex){
            this.$parent.$parent.addFunnel(subIndex);
        },
        /**
         *  methods 删除子级筛选条件
         * */
        delChildFunnel(childSubindex){
            this.$parent.$parent.delChildFunnel(childSubindex);
        }
    },
    components:{
        STEPCHILD
    }
}
</script>